<template>
  <view class="tabs">
    <view :class="['tab', activeTab === 'prescription' ? 'active' : '']" @click="$emit('change-tab', 'prescription')">处方</view>
    <view :class="['tab', activeTab === 'medicalGuidance' ? 'active' : '']" @click="$emit('change-tab', 'medicalGuidance')">用药指导</view>
    <view :class="['tab', activeTab === 'examine' ? 'active' : '']" @click="$emit('change-tab', 'examine')">检验检查</view>
  </view>
</template>

<script>
export default {
  props: {
    activeTab: {
      type: String,
      default: 'prescription'
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
}

.tab {
  font-size: 34rpx;
  color: #aaa;
  padding-bottom: 8rpx;
  position: relative;
  
  &.active {
    color: #222;
    font-weight: bold;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 8rpx;
      background: #1ec6e6;
    }
  }
}
</style>